<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>    
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=en"></script>   
    <script src="js/ExtInfoWindow_v.js" type="text/javascript"></script>
    <script src="js/map_v.js" type="text/javascript"></script>
    <style type="text/css">
    .canvas
    {
        width:800px;
        height:600px;   
    }
    .search_div
    {    
        background-color:lightGray;    
    }
    .search_box
    {
        background:url(images/s_bg.jpg) no-repeat;
        position:absolute;
        height:30px;
        width:218px; 
        z-index:1000;
        display:none;
    }
    .search_box a
    {
    	text-decoration:none;
    }
    .search_input
    {
        position:absolute;
        width:135px;
        height:18px;
        line-height:18px;
        top:4px;
        left:30px; 
        margin:0px;
        border:none;
        font-size:middle;
		border:none;
    }
    .search_images
    {
        width:17px;
        height:12px;
        left:6px;
        position:absolute;  
        top:4px;  
        cursor: pointer;
    }
    .left
    {
        left:6px;
    }
    .right
    {
        left:170px;
        width:18px;
        height:18px;
        line-height:18px;
        top:5px;
        display:inline-block;
        background-color:transparent;
    }
   	.search_option
   	{
   	    display:inline-block;
   		background-color:transparent;
   		text-indent:-99999em;
        left:191px; 
        width:18px;
        height:18px;
        line-height:18px;
        top:5px; 
   	}
    .map_search_box
    {
        left:100px;
        top:20px;
        display:block;
    }
    body
    {
    padding:0px;
    margin:0px;
   	} 
    .search_type_options
    {
        display:none;
        font-size:middle;
        list-style:none;
        padding:0px;
        background-color:#E3E3E3;
        position:absolute;
        width:100px;
        cursor:pointer;
    	padding-left:15px; 
    }
   	.search_type_options:hover
   	{
   		display:block;
    }
    .search_type_options li:hover
    {
        background-color:lightgray;
    }
    .search_type_options li.selected
    {    	
        list-style-type:disc;
    }
    .search_input_cover
    {
    	color:gray;
    }
    .informationwindow
    {
    	width:313px;
    	heigt:100px; 
    }
    .to_information_box
    {
    	display:none;
   	}
   	.msinfotitle
   	{
   		font-weight: bold;
   		margin:5px 0px 5px 0px;
    }
    .msiwmoreaction
    {    	
    	display:none;
    }
    .msiwmoreaction ul 
    {
    	list-style:none;
    	display:inline;
    	padding-left:0px;
    }
    .msiwmoreaction ul li
    { 
    	display:inline;
    }
        
    </style>
</head>
<body>
    <div>           
        <div class="to_search_box" style="display:none">
            <div class="search_box"> 
                <a  class="search_images search_cancel right" href="#">&nbsp</a>
                <a class="search_images search_option">options</a>                
                <ul class="search_type_options">
                    <li searchtype="name">trail name</li>
                    <li searchtype="address">location</li>
                </ul>
                <input type="text" class="search_input"/>
            </div>
        </div> 
        <div class="to_information_box">
        	<div class="informationwindow ">        	
				<DIV dir='ltr' class='msinfotitle' align='left' imageFetcherOpts="null">
					Riders of Rohan
				</DIV>
				<div class="description msiwcontentholder">
				</div>
				<div class="msiwmoreaction">
					<ul>
						<li><a href="#" class="directions">Directions</a></li>
						<li><a href="#" class="searchnearby">Search nearby</a></li> 
					</ul>
				</div>
        	</div>
        </div>
        <div class="canvas"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

			var embed = '<?php echo $_REQUEST['embed']?>';
			var latlngStr = '<?php echo  $_REQUEST['ll']?>';
			var latlngArray = latlngStr.split(',');
			var latlng = new google.maps.LatLng(38.08269, 88.481445);
			if(latlngArray.length==2)
			{
				latlng = new google.maps.LatLng(latlngArray[0], latlngArray[1]);
			}
			var zoomStr = '<?php if($_REQUEST['z']==NULL || $_REQUEST['z']=='') echo 4;else echo $_REQUEST['z']; ?>';
			if(zoomStr =='')
			{
				zoomStr = '4';
			}
			var zoom  = parseInt(zoomStr);
	        var queryString = '<?php echo $_SERVER['QUERY_STRING'] ?>'+'&output=kml' ;//"ie=UTF8&hl=zh-CN&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&msa=0&msid=212800177725253189507.0004a07859593181e6f23&ll=38.08269,98.481445&spn=13.995455,33.815918&z=6";
            var url = "request.php?" + queryString;
			var mapCanvas ='.canvas';
			if(embed!='0')
			{
				var autoResize =function()
				{
					$(mapCanvas).width($(window).width()+"px");
					$(mapCanvas).height($(window).height()+"px");
				};
				autoResize();
				$(window).resize(function(){
					autoResize();
				});
			}
            var sbposition = [<?php if($_REQUEST['sbp']==NULL || $_REQUEST['sbp']=='') echo "100,20";else echo $_REQUEST['sbp'];?>];
			var searchboxPosition = sbposition.length==2?sbposition: [100,20];
            var mapToolkit = new MyMapToolsKit({
                mapCanvas: mapCanvas,
                mapOptions: {
                    zoom: zoom,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    minZoom: 1,
                    maxZoom: 17
                },
                mapSearchBoxOptions: {
                    clone: ".search_box",
                    className: "map_search_box",
                    searchInput: ".search_input",
                    searchCancel: ".search_cancel",
                    searchBoxPosition:searchboxPosition
                },
                embed:embed
            });
            jQuery.get(url, "", function (data) {
				var xmlDoc = loadXML(data);
                mapToolkit.initialize(xmlDoc);
            }); 
        });

        
    </script>
</body>
</html>
